<script setup>
import Map from "../map/index.vue";
</script>

<template>
  <div class="container">
    <!-- <div class="header">
      <div class="back"></div>
      <span>教师资格认定一件事</span>
    </div> -->
    <div class="box1">
      <span class="box1-c1">教师资格认定 <br />(高中及以下) 一件事</span>
      <div class="box1-c2">
        <div class="box1-c2-c">一张表单</div>
        <div class="box1-c2-c">一份材料</div>
        <div class="box1-c2-c">一次办结</div>
      </div>
    </div>
    <div class="box2">
      <div class="box2-c h-179px">
        <div class="box2-c-t">
          <div class="box2-c-t-i"></div>
          <span>联办事项</span>
        </div>
        <div class="box2-c-c gap-5">
          <div class="box2-c-c-c1">
            <img src="../../assets/image/arrow.png" />
            <span>初中及以下教师资格认定</span>
          </div>
          <div class="box2-c-c-c1">
            <img src="../../assets/image/arrow.png" />
            <span>高中教师资格认定</span>
          </div>
          <div class="box2-c-c-c1">
            <img src="../../assets/image/arrow.png" />
            <span>无犯罪记录证明</span>
          </div>
        </div>
      </div>
      <div class="box2-c h-auto">
        <div class="box2-c-t">
          <div class="box2-c-t-i"></div>
          <span>办理条件</span>
        </div>
        <div class="box2-c-c gap-3">
          <div class="box2-c-c-c2">
            <img src="../../assets/image/cir1.png" class="cirImg" />
            <span class="flex-1"
              >遵守宪法和法律，热爱教育事业，履行《中华人民共和国教师法》规定义务，遵守教师职业道德，有良好的思想政治素质，有理想信念、道德情操、扎实学问、仁爱之心。</span
            >
          </div>
          <div class="box2-c-c-c2">
            <img src="../../assets/image/cir2.png" class="cirImg" />
            <span class="flex-1"
              >符合《教师法》及《重庆市中小学教师资格考试改革试点工作实施细则》规定的相应学历。</span
            >
          </div>
          <div class="box2-c-c-c2">
            <img src="../../assets/image/cir3.png" class="cirImg" />
            <span class="flex-1"
              >取得《中小学教师资格考试合格证明》且在有效期内；或取得《师范生教师职业能力证书》且在有效期内。</span
            >
          </div>
          <div class="box2-c-c-c2">
            <img src="../../assets/image/cir4.png" class="cirImg" />
            <span class="flex-1"
              >达到普通话水平测试等级要求。其中，申请语文学科教师资格的应达到二级甲等及以上水平，申请其他学科教师资格的应当达到二级乙等及以上水平。</span
            >
          </div>
          <div class="box2-c-c-c2">
            <img src="../../assets/image/cir5.png" class="cirImg" />
            <span class="flex-1"
              >应当具备良好的身体素质和心理素质，能适应教育教学工作的需要。无传染性疾病，无精神病史，在指定医院体检合格。</span
            >
          </div>
        </div>
      </div>
      <div class="box2-c h-375px">
        <div class="box2-c-t">
          <div class="box2-c-t-i"></div>
          <span>申请材料</span>
        </div>
        <div class="box2-c-c gap-5">
          <div class="box2-c-c-c1">
            <span>“教资认定一件事”集成化办理需材料：</span>
          </div>
          <div class="box2-c-c-c1">
            <img src="../../assets/image/cir1.png" class="cirImg" />
            <span>身份证</span>
          </div>
          <div class="box2-c-c-c1">
            <img src="../../assets/image/cir2.png" class="cirImg" />
            <span>户籍证明</span>
          </div>
          <div class="box2-c-c-c1">
            <img src="../../assets/image/cir3.png" class="cirImg" />
            <span>学历/学籍证明</span>
          </div>
          <div class="box2-c-c-c1">
            <img src="../../assets/image/cir4.png" class="cirImg" />
            <span>普通话等级证书</span>
          </div>
          <div class="box2-c-c-c1">
            <img src="../../assets/image/cir5.png" class="cirImg" />
            <span>证件照</span>
          </div>
          <div class="box2-c-c-c1">
            <img src="../../assets/image/cir6.png" class="cirImg" />
            <span>个人承诺书</span>
          </div>
          <div class="box2-c-c-c1">
            <img src="../../assets/image/cir7.png" class="cirImg" />
            <span>成绩合格证明/师范生教师职业能力证书</span>
          </div>
        </div>
      </div>
      <div class="box2-c h-403px">
        <div class="box2-c-t">
          <div class="box2-c-t-i"></div>
          <span>办理流程</span>
        </div>
        <div class="box2-c-c gap-3">
          <div class="box2-c-c-c3">
            <img
              src="../../assets/image/cir1.png"
              class="cirImg box2-c-c-c3-i"
            />
            <span>提交申请</span>
          </div>
          <div class="box2-c-c-c3">
            <img
              src="../../assets/image/cir2.png"
              class="cirImg box2-c-c-c3-i"
            />
            <span>初审</span>
          </div>
          <div class="box2-c-c-c3">
            <img
              src="../../assets/image/cir3.png"
              class="cirImg box2-c-c-c3-i"
            />
            <span>体检</span>
          </div>
          <div class="box2-c-c-c3">
            <img
              src="../../assets/image/cir4.png"
              class="cirImg box2-c-c-c3-i"
            />
            <span>邮寄证件照</span>
          </div>
          <div class="box2-c-c-c3">
            <img
              src="../../assets/image/cir5.png"
              class="cirImg box2-c-c-c3-i"
            />
            <span>认定</span>
          </div>
          <div class="box2-c-c-c3">
            <img
              src="../../assets/image/cir6.png"
              class="cirImg box2-c-c-c3-i"
            />
            <span>发放</span>
          </div>
        </div>
      </div>
      <div class="box2-c h-200px">
        <div class="box2-c-t">
          <div class="box2-c-t-i"></div>
          <span>“教师资格认定一件事”网上办理入口指引</span>
        </div>
        <div class="box2-c-c gap-4">
          <div class="box2-c-c-c5">
            <span
              >暂不支持手机端办理，请使用浏览器登录重庆政务服务网（https://zwykb.cq.gov.cn/）。</span
            >
            <span
              >点击“高效办成一件事”专区——“个人服务”——“入学就业”——教师资格认定（高中及以下）一件事进行线上办理，也可到各区县办理点申请线下办理。</span
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.container {
  width: 100vw;
  height: 100vh;
  background: #f6f7f8;
  overflow-y: auto;
  position: relative;
  .header {
    width: 100%;
    height: 44px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 18px;
    color: #363a44;
    position: relative;
    .back {
      position: absolute;
      left: 16px;
      width: 24px;
      height: 24px;
      background: url(../../assets/image/goBack.png) no-repeat;
      background-size: 100% 100%;
    }
  }
  .box1 {
    width: 100%;
    height: 440px;
    background: url(../../assets/image/bg.png) no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding-top: 16px;
    .box1-c1 {
      font-weight: bold;
      font-size: 30px;
      color: #083a66;
      letter-spacing: 2px;
      text-align: center;
      font-style: normal;
      text-transform: none;
    }
    .box1-c2 {
      width: 100%;
      height: 28px;
      display: flex;
      justify-content: center;
      gap: 8px;
      .box1-c2-c {
        width: 88px;
        height: 100%;
        background: #ffffff;
        border-radius: 34px 34px 34px 34px;
        font-weight: 500;
        font-size: 14px;
        color: #1e92f0;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
  .box2 {
    width: 100%;
    // height: 100%;
    padding: 0 16px 34px;
    position: absolute;
    top: 210px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    .box2-c {
      flex-shrink: 0;
      width: 100%;
      background: #ffffff;
      border-radius: 16px 16px 16px 16px;
      display: flex;
      flex-direction: column;
      gap: 16px;
     
      .box2-c-t {
        width: 100%;
        height: 16px;
        margin-top: 16px;
        padding-left: 24px;
        font-weight: 600;
        font-size: 16px;
        line-height: 16px;
        color: #363a44;
        position: relative;
        .box2-c-t-i {
          width: 8px;
          height: 16px;
          background: url(../../assets/image/title.png) no-repeat;
          background-size: 100% 100%;
          position: absolute;
          left: 0;
        }
      }
      .box2-c-c {
        // flex: 1;
        // height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        padding: 0 12px 25px;
        .box2-c-c-c1 {
          display: flex;
          align-items: center;
          gap: 8px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #363a44;
          line-height: 20px;
        }
        .box2-c-c-c2 {
          display: flex;
          align-items: center;
          gap: 12px;
          // width: 100%;
          background: #f0f8ff;
          border-radius: 8px 8px 8px 8px;
          font-size: 13px;
          color: #686b73;
          padding: 10px;
        }
        .box2-c-c-c3 {
          display: flex;
          align-items: center;
          gap: 12px;
          margin-left: 8px;
          background: #f0f8ff;
          border-radius: 8px 8px 8px 8px;
          font-size: 13px;
          color: #686b73;
          padding: 12px 0px 12px 16px;
          position: relative;
          .box2-c-c-c3-i {
            position: absolute;
            left: -7px;
          }
        }
        .box2-c-c-c4 {
          display: flex;
          align-items: center;
          gap: 6px;
          font-weight: 600;
          font-size: 16px;
          color: #363a44;
        }
        .box2-c-c-c5 {
          display: flex;
          flex-direction: column;
          gap: 8px;
          font-size: 13px;
          color: #686b73;
          
        }
        .map {
          flex: 1;
        }
      }
    }
  }
  .cirImg {
    width: 16px;
    height: 16px;
  }
  .arrImg {
    width: 20px;
    height: 20px;
  }
}
</style>
